<template>
    <div class="box">
        <h3>路由地址定义</h3>
        <p>1.一级路由默认地址 => / </p>
        <pre>路由可以通过为 path 属性取值 / , 指定vue项目默认显示的路由组件</pre>
        <ul>
            <li>方式一：{ path:"/",component:DefaultPage } </li>
            <li>
                方式二：{ path:"/",redirect:"/default" } <br>
                重定向规则是当浏览器访问地址 / 时，会自动将地址切换为 /default <br>
                redirect 配置不能和 component 配置同时出现
            </li>
        </ul>
        <p>2.一级路由通配地址【404地址】</p>
        <ul>
            <li>vue-router@3 版本，path 取值 * 表示通配所有路由表中不存在的地址</li>
            <li>
                vue-router@4 版本，path 取值类似于KOA路由的通配正则表达式 <br>
                { path:"/:路径变量名(.*)*",component:NotFound } <br>
                /:路径变量名 为rest参数规则，路径参数变量名自定义 <br>
                (.*)* 为通配正则表达式，表示任意路径取值
            </li>
        </ul>
        <p>3.路由基础路径定义</p>
        <ul>
            <li>
                一级路由基础路径定义：在路由配置时routes中直接定义的地址导航组件 <br>
                path 取值必须是以 / 开头，但不限制层级 <br>
                正确取值 path:"/a"   path:"/a/b" …… <br>
                错误取值 path:"a"
            </li>
            <li>
                多级路由的基础路由定义：在一级路由或其它路由配置中以属性children方式描述的导航组件 <br>
                多级路由定义，path取值可以分为 相对路径取值 和 绝对路径取值 两种方式 <br>
                <ul>
                    <li>
                        绝对路径取值:path的取值只要是以 / 方式开头均为绝对地址，浏览器地址的记录是从 # 开始，不影响路由层级 <br>
                        <RouterLink to="/childA">绝对路径导航的子路由组件</RouterLink>
                    </li>
                    <li>
                        相对路径取值:不能出现在一级路由中，因为path取值开头没有关键字/,而此时子路由的地址会和父路由的地址进行拼接，显示在浏览器上 <br>
                        子级路由的默认地址以 path 取值 “” 字符串描述，配置规则不变 <br>
                        子级路由的通配地址和一级路由的通配地址定义规则一致，只需要保证在子级路由中进行配置即可 <br>
                        <!-- <RouterLink to="childB">绝对路径导航的子路由组件（父路由地址不能是多级地址-开发中不要使用）</RouterLink> <br> -->
                        <RouterLink to="/router/path/childB">绝对路径导航的子路由组件</RouterLink>
                    </li>
                </ul>
            </li>
        </ul>
        <hr>
        <h3>路由地址模式和模式切换</h3>
        <pre>
        通过配置 history 取值，可修改路由模式
            + hash模式(createWebHashHistory) ： 以 html 中 锚点技术实现的 路由匹配切换
                - 锚点 可以更改 url地址的同时 ，不刷新页面的方式实现
                - 通过 window.location.hash 获取 锚点值，通过锚点值 匹配组件，进行渲染展示
            + history 模式(createWebHistory) ： 历史地址模式 - 必须配合 base 属性进行定义前缀描述和加载
                - 该模式不能单独使用，必须需要后台通过代码进行 配合使用
                - 将地址转换为正常的 URL地址，使用JS的URL地址栏 history API 中 pushState 实现页面不刷新组件更新的效果
        </pre>
        <p>历史模式使用时，在生产环境先如果刷新页面，会导致请求404资源丢失，<br>
            如果需要在保留历史模式的情况下解决上述问题 只能修改生产服务器配置 <br>
            修改方式:https://router.vuejs.org/zh/guide/essentials/history-mode.html
        </p>
        <hr>
        <RouterView></RouterView>
    </div>
</template>

<script setup>

</script>

<style lang="sass" scoped>

</style>